<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书 - 南京旅游攻略</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary-color: #ff2442;
            --secondary-color: #ff7b9c;
            --dark-color: #333;
            --light-color: #f8f9fa;
            --gray-color: #6c757d;
        }
        
        body {
            background-color: #f5f5f5;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .logo-icon {
            width: 30px;
            height: 30px;
            background-color: var(--primary-color);
            border-radius: 8px;
            margin-right: 10px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin: 0 15px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--primary-color);
        }
        
        .user-actions {
            display: flex;
            align-items: center;
        }
        
        .btn {
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }
        
        .btn-login {
            background-color: transparent;
            color: var(--gray-color);
            margin-right: 10px;
        }
        
        .btn-register {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 40px;
            color: var(--dark-color);
        }
        
        .page-title h1 {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .page-title p {
            color: var(--gray-color);
            font-size: 18px;
        }
        
        .recommendation-section {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .recommendation-column {
            flex: 1;
            min-width: 300px;
        }
        
        .section-card {
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 22px;
            font-weight: bold;
            color: var(--dark-color);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            color: var(--primary-color);
            margin-right: 10px;
            font-size: 24px;
        }
        
        .refresh-btn {
            background: none;
            border: none;
            color: var(--gray-color);
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .refresh-btn:hover {
            color: var(--primary-color);
        }
        
        .refresh-btn i {
            margin-right: 5px;
        }
        
        .rec-card {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 8px;
            background-color: #f9f9f9;
            margin-bottom: 15px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .rec-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        
        .rec-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .rec-info {
            flex-grow: 1;
        }
        
        .rec-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark-color);
        }
        
        .rec-stats {
            display: flex;
            align-items: center;
            color: var(--gray-color);
            font-size: 14px;
        }
        
        .rec-stats i {
            color: var(--primary-color);
            margin-right: 5px;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 8px;
            background-color: #f9f9f9;
            margin-bottom: 15px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .ranking-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        
        .rank-number {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .rank-number.top3 {
            background-color: var(--primary-color);
        }
        
        .rank-number.top10 {
            background-color: var(--secondary-color);
        }
        
        .rank-info {
            flex-grow: 1;
        }
        
        .rank-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark-color);
        }
        
        .rank-stats {
            display: flex;
            align-items: center;
            color: var(--gray-color);
            font-size: 14px;
        }
        
        .rank-stats i {
            color: var(--primary-color);
            margin-right: 5px;
        }
        
        .attractions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .attraction-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }
        
        .attraction-card:hover {
            transform: translateY(-10px);
        }
        
        .card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: var(--dark-color);
        }
        
        .card-desc {
            color: var(--gray-color);
            margin-bottom: 15px;
            font-size: 14px;
            height: 45px;
            overflow: hidden;
        }
        
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .tag {
            background-color: #f0f0f0;
            color: var(--gray-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .tag.highlight {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        
        .author {
            display: flex;
            align-items: center;
        }
        
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 10px;
        }
        
        .author-name {
            font-size: 14px;
            color: var(--gray-color);
        }
        
        .likes {
            display: flex;
            align-items: center;
            color: var(--gray-color);
            font-size: 14px;
        }
        
        .likes i {
            margin-right: 5px;
            color: var(--primary-color);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
            overflow: hidden;
        }
        
        .modal-header {
            padding: 20px;
            background-color: var(--primary-color);
            color: white;
            position: relative;
        }
        
        .modal-header h2 {
            font-size: 24px;
        }
        
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .btn-submit {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn-submit:hover {
            background-color: #e60023;
        }
        
        .form-footer {
            text-align: center;
            margin-top: 20px;
            color: var(--gray-color);
        }
        
        .form-footer a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .preference-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .preference-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--dark-color);
        }
        
        .preference-section {
            margin-bottom: 30px;
        }
        
        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .option-card {
            padding: 15px;
            border: 2px solid #eee;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .option-card:hover {
            border-color: var(--secondary-color);
        }
        
        .option-card.selected {
            border-color: var(--primary-color);
            background-color: rgba(255, 36, 66, 0.05);
        }
        
        .option-card i {
            font-size: 24px;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background-color: #f8f9fa;
            border-radius: 20px;
            cursor: pointer;
        }
        
        .checkbox-item input {
            margin-right: 8px;
        }
        
        .btn-save {
            display: block;
            width: 200px;
            margin: 40px auto 0;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }
        
        footer {
            background-color: white;
            padding: 30px 5%;
            text-align: center;
            margin-top: 50px;
            border-top: 1px solid #eee;
            position: relative;
            z-index: 1;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            list-style: none;
            margin-bottom: 20px;
        }
        
        .footer-links li {
            margin: 0 15px;
        }
        
        .footer-links a {
            text-decoration: none;
            color: var(--gray-color);
        }
        
        .copyright {
            color: var(--gray-color);
            font-size: 14px;
        }

       .search-box {
            display: flex;
            align-items: center;
            margin: 0 20px;
        }

        .search-box input {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px 0 0 20px;
            outline: none;
            width: 200px;
        }

        .search-box button {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-left: none;
            background: #f8f9fa;
            border-radius: 0 20px 20px 0;
            cursor: pointer;
        }

        .search-box button:hover {
            background: #e9ecef;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .btn-logout {
            padding: 5px 15px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-logout:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .note-actions button.liked,
        .note-actions button.collected {
            background-color: #ff5722;
            color: white;
            border-color: #ff5722;
        }

        .user-stats {
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }

        .stats-card {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .stat-item i {
            margin-right: 10px;
            font-size: 20px;
        }

        .note-card {
            padding: 15px;
            margin-bottom: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .note-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .note-content {
            color: #666;
            margin-bottom: 10px;
        }

        .note-actions {
            display: flex;
            gap: 10px;
        }

        .note-action-btn {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            background-color: #f5f5f5;
        }

        .note-action-btn.liked, .note-action-btn.collected {
            background-color: #ff2442;
            color: white;
            border-color: #ff2442;
        }

        .spot-modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            justify-content: center;
            align-items: center;
        }

        .spot-modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 30px;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            position: relative;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
        }

        .spot-modal-close {
            color: #aaa;
            position: absolute;
            top: 15px;
            right: 25px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .spot-modal-title {
            font-size: 28px;
            margin-bottom: 20px;
        }

        .spot-modal-body {
            font-size: 16px;
            color: #333;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .spot-modal-footer {
            display: flex;
            gap: 15px;
        }

        .modal-action-btn {
            padding: 10px 20px;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            background-color: #f5f5f5;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .modal-action-btn:hover {
            background-color: #e9e9e9;
        }

        .modal-action-btn.liked, .modal-action-btn.collected {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        @media (max-width: 992px) {
            .attractions-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-links { flex-wrap: wrap; }
        }
        
        @media (max-width: 768px) {
            .navbar { flex-direction: column; align-items: flex-start; }
            .nav-links { margin-top: 15px; flex-wrap: wrap; }
            .nav-links li { margin: 0 15px 10px 0; }
            .user-actions { margin-top: 15px; }
            .attractions-grid { grid-template-columns: 1fr; }
            .options-grid { grid-template-columns: repeat(2, 1fr); }
            .recommendation-column { min-width: 100%; }
        }
        
        @media (max-width: 576px) {
            .options-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <div class="logo-icon"></div>
            小红书旅行
        </div>
        <ul class="nav-links">
            <li><a href="#" onclick="showHomePage()">首页</a></li>
            <li><a href="#">攻略</a></li>
            <li><a href="#">目的地</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">住宿</a></li>
            <li><a href="#" onclick="showProfilePage()">个人中心</a></li>
        </ul>
        <div class="search-box">
            <input type="text" placeholder="搜索景点、攻略..." id="searchInput">
            <button id="searchBtn"><i class="fas fa-search"></i></button>
        </div>
        <div class="user-actions">
            <button class="btn btn-login" id="loginBtn">登录</button>
            <button class="btn btn-register" id="registerBtn">注册</button>
        </div>
    </nav>

    <div class="container">
        <div class="page-title">
            <h1>南京旅游攻略</h1>
            <p>探索六朝古都的历史韵味与现代风情</p>
        </div>
        
        <div id="search-results" style="display: none;">
            <h2 class="section-title"><i class="fas fa-search"></i> 搜索结果</h2>
            <div id="search-results-content" style="margin-top:20px;"></div>
            <div style="text-align: center; margin-top: 20px;">
                <button class="btn-save" onclick="showHomePage()">返回首页</button>
            </div>
        </div>
        
        <div id="main-content">
            <div class="recommendation-section">
                <div class="recommendation-column">
                    <div class="section-card">
                        <div class="section-header">
                            <h2 class="section-title"><i class="fas fa-heart"></i> 猜你喜欢</h2>
                            <button class="refresh-btn" id="refreshRec" onclick="fetchRecommendations()">
                                <i class="fas fa-sync-alt"></i> 换一批
                            </button>
                        </div>
                        <div id="recommendationList"></div>
                    </div>
                </div>
                
                <div class="recommendation-column">
                    <div class="section-card">
                        <div class="section-header">
                            <h2 class="section-title"><i class="fas fa-fire"></i> 热门景点排名</h2>
                            <div class="refresh-btn">
                                <span id="updateTime">刚刚更新</span>
                            </div>
                        </div>
                        <div id="rankingList"></div>
                    </div>
                </div>
            </div>

            <div class="attractions-grid" id="attractionsGrid">
                </div>
        </div>
    </div>

    <div class="modal" id="registerModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>注册小红书账号</h2>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="设置您的用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" placeholder="输入您的邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="设置您的密码" required>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" id="confirmPassword" placeholder="再次输入密码" required>
                    </div>
                    <button type="submit" class="btn-submit">注册</button>
                </form>
                <div class="form-footer">
                    已有账号？<a href="#" id="switchToLogin">立即登录</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>登录小红书</h2>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input type="text" id="loginUsername" placeholder="输入您的用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" placeholder="输入您的密码" required>
                    </div>
                    <button type="submit" class="btn-submit">登录</button>
                </form>
                <div class="form-footer">
                    还没有账号？<a href="#" id="switchToRegister">立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <div id="preferencePage" style="display: none;">
        <div class="preference-container">
            <div class="preference-title">
                <h2>完善您的旅游偏好</h2>
                <p>告诉我们您的旅行喜好，为您推荐更合适的攻略</p>
            </div>
            
            <div class="preference-section" id="pref-season">
                <h3 class="section-title">旅行时间偏好</h3>
                <div class="options-grid">
                    <div class="option-card" data-value="spring"><div>🌸</div><h4>春季</h4></div>
                    <div class="option-card" data-value="summer"><div>☀️</div><h4>夏季</h4></div>
                    <div class="option-card" data-value="autumn"><div>🍂</div><h4>秋季</h4></div>
                    <div class="option-card" data-value="winter"><div>❄️</div><h4>冬季</h4></div>
                </div>
            </div>
            
            <div class="preference-section" id="pref-duration">
                <h3 class="section-title">旅行时长</h3>
                <div class="options-grid">
                    <div class="option-card" data-value="1day"><h4>1天</h4><p>周末短途游</p></div>
                    <div class="option-card" data-value="2-3days"><h4>2-3天</h4><p>小长假出行</p></div>
                    <div class="option-card" data-value="4-7days"><h4>4-7天</h4><p>深度体验游</p></div>
                    <div class="option-card" data-value="7+days"><h4>7天以上</h4><p>长期深度游</p></div>
                </div>
            </div>
            
            <div class="preference-section" id="pref-company">
                <h3 class="section-title">同行人员</h3>
                <div class="options-grid">
                    <div class="option-card" data-value="solo"><div>👤</div><h4>独自旅行</h4></div>
                    <div class="option-card" data-value="couple"><div>👫</div><h4>情侣/夫妻</h4></div>
                    <div class="option-card" data-value="family"><div>👨‍👩‍👧</div><h4>家庭/带孩子</h4></div>
                    <div class="option-card" data-value="friends"><div>👭</div><h4>朋友同行</h4></div>
                </div>
            </div>
            
            <div class="preference-section" id="pref-budget">
                <h3 class="section-title">预算范围（每人）</h3>
                <div class="options-grid">
                    <div class="option-card" data-value="500"><h4>500元以下</h4><p>经济型</p></div>
                    <div class="option-card" data-value="1000"><h4>500-1000元</h4><p>舒适型</p></div>
                    <div class="option-card" data-value="2000"><h4>1000-2000元</h4><p>品质型</p></div>
                    <div class="option-card" data-value="5000"><h4>2000元以上</h4><p>豪华型</p></div>
                </div>
            </div>
            
            <div class="preference-section" id="pref-interests">
                <h3 class="section-title">兴趣偏好（可多选）</h3>
                <div class="checkbox-group">
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="history"> 历史文化</label>
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="nature"> 自然风光</label>
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="food"> 美食探店</label>
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="shopping"> 购物血拼</label>
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="art"> 艺术展览</label>
                    <label class="checkbox-item"><input type="checkbox" name="interest" value="nightlife"> 夜生活</label>
                </div>
            </div>
            
            <div class="preference-section" id="pref-transport">
                <h3 class="section-title">交通方式偏好</h3>
                <div class="options-grid">
                    <div class="option-card" data-value="public"><div>🚇</div><h4>公共交通</h4></div>
                    <div class="option-card" data-value="taxi"><div>🚖</div><h4>出租车/网约车</h4></div>
                    <div class="option-card" data-value="drive"><div>🚗</div><h4>自驾</h4></div>
                    <div class="option-card" data-value="walk"><div>🚶</div><h4>步行/骑行</h4></div>
                </div>
            </div>
            
            <button class="btn-save" id="savePreferences">保存偏好设置</button>
        </div>
    </div>

    <div id="profile-page" style="display: none;">
        <div class="preference-container">
            <div class="preference-title">
                <h2>我的个人中心</h2>
                <p>查看您的旅行统计和收藏内容</p>
            </div>
            
            <div class="preference-section">
                <h3 class="section-title">我的统计信息</h3>
                <div class="user-stats">
                    <div class="stats-card">
                        <i class="fas fa-user" style="color: #3498db; font-size: 24px;"></i>
                        <h4 id="profile-name">用户名</h4>
                    </div>
                    
                    <div class="stats-grid">
                        <div class="stat-item"><i class="fas fa-pen-alt" style="color: #e74c3c;"></i><span id="profile-notes-posted">我发布的游记: 0</span></div>
                        <div class="stat-item"><i class="fas fa-heart" style="color: #e74c3c;"></i><span id="profile-likes-received">收到的赞: 0</span></div>
                        <div class="stat-item"><i class="fas fa-star" style="color: #f39c12;"></i><span id="profile-collections-made">我的收藏数: 0</span></div>
                    </div>
                </div>
            </div>
            
            <div class="preference-section">
                <h3 class="section-title">我的收藏</h3>
                <div id="my-collections-container"></div>
            </div>
            
            <div class="preference-section">
                <button class="btn-save" onclick="showHomePage()">返回首页</button>
            </div>
        </div>
    </div>

    <div id="spotDetailModal" class="spot-modal">
        <div class="spot-modal-content">
            <span class="spot-modal-close" onclick="closeSpotModal()">&times;</span>
            <h2 id="modalSpotName" class="spot-modal-title">景点名称</h2>
            <p id="modalSpotDesc" class="spot-modal-body">景点描述加载中...</p>
            <div class="spot-modal-footer">
                <button id="modalLikeBtn" class="modal-action-btn">
                    <i class="fas fa-heart"></i> 赞 (<span id="modalLikeCount">0</span>)
                </button>
                <button id="modalCollectBtn" class="modal-action-btn">
                    <i class="fas fa-star"></i> 收藏 (<span id="modalCollectCount">0</span>)
                </button>
            </div>
        </div>
    </div>

    <div id="noteDetailModal" class="spot-modal">
        <div class="spot-modal-content">
            <span class="spot-modal-close" onclick="closeNoteModal()">&times;</span>
            <h2 id="modalNoteTitle" class="spot-modal-title">游记标题加载中...</h2>
            <p style="color: #6c757d; margin-bottom: 20px;">作者: <span id="modalNoteAuthor">...</span></p>
            <div id="modalNoteContent" class="spot-modal-body" style="white-space: pre-wrap;">游记内容加载中...</div>
            <div class="spot-modal-footer">
                <button id="modalNoteLikeBtn" class="modal-action-btn">
                    <i class="fas fa-heart"></i> 赞 (<span id="modalNoteLikeCount">0</span>)
                </button>
                <button id="modalNoteCollectBtn" class="modal-action-btn">
                    <i class="fas fa-star"></i> 收藏 (<span id="modalNoteCollectCount">0</span>)
                </button>
            </div>
        </div>
    </div>
    
    <footer>
        <ul class="footer-links">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">用户协议</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
        <p class="copyright">© 2023 小红书旅行 - 发现美好旅行体验</p>
    </footer>

  <script>
    const API_BASE = "http://localhost:5000";
    let authToken = localStorage.getItem("authToken");
    let currentUser = localStorage.getItem("currentUser");

    async function handleLike(noteId) {
        if (!authToken) { alert('请先登录！'); return; }
        try {
            const response = await fetch(`${API_BASE}/api/notes/${noteId}/like`, { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}` } });
            const result = await response.json();
            if (result.success) {
                document.querySelectorAll(`#like-count-${noteId}`).forEach(el => el.innerText = result.like_count);
                document.querySelectorAll(`.note-action-btn[onclick="handleLike(${noteId})"]`).forEach(el => el.classList.toggle('liked', result.liked));
            } else { alert(result.message); }
        } catch (error) { console.error('点赞游记操作失败:', error); }
    }

    async function handleCollect(noteId) {
        if (!authToken) { alert('请先登录！'); return; }
        try {
            const response = await fetch(`${API_BASE}/api/notes/${noteId}/collect`, { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}` } });
            const result = await response.json();
            if (result.success) {
                document.querySelectorAll(`#collect-count-${noteId}`).forEach(el => el.innerText = result.collect_count);
                document.querySelectorAll(`.note-action-btn[onclick="handleCollect(${noteId})"]`).forEach(el => el.classList.toggle('collected', result.collected));
                if (document.getElementById("profile-page").style.display === "block") {
                    if (!result.collected) {
                        const card = document.querySelector(`#my-collections-container #note-card-${noteId}`);
                        if (card) card.remove();
                    }
                    displayUserStats();
                }
            } else { alert(result.message); }
        } catch (error) { console.error('收藏游记操作失败:', error); }
    }

    async function showSpotDetails(spotId) {
        if (!spotId) return;
        try {
            const headers = authToken ? { 'Authorization': `Bearer ${authToken}` } : {};
            const res = await fetch(`${API_BASE}/api/spots/${spotId}`, { headers });
            const result = await res.json();
            if (result.success) {
                const spot = result.data;
                document.getElementById('modalSpotName').innerText = spot.full_name;
                document.getElementById('modalSpotDesc').innerText = spot.description || spot.info || '暂无详细介绍。';
                
                const likeBtn = document.getElementById('modalLikeBtn');
                document.getElementById('modalLikeCount').innerText = spot.likes;
                likeBtn.classList.toggle('liked', spot.user_has_liked);
                likeBtn.onclick = () => handleSpotLike(spotId);

                const collectBtn = document.getElementById('modalCollectBtn');
                document.getElementById('modalCollectCount').innerText = spot.collect_count;
                collectBtn.classList.toggle('collected', spot.user_has_collected);
                collectBtn.onclick = () => handleSpotCollect(spotId);

                document.getElementById('spotDetailModal').style.display = 'flex';
            } else { alert('获取景点详情失败: ' + result.message); }
        } catch (error) { console.error('获取景点详情错误:', error); alert('获取景点详情时发生网络错误'); }
    }

    function closeSpotModal() {
        document.getElementById('spotDetailModal').style.display = 'none';
    }

    // 【新增加】关闭游记弹窗的函数
    function closeNoteModal() {
        document.getElementById('noteDetailModal').style.display = 'none';
    }

    // 【新增加】获取并显示游记详情的函数
    async function showNoteDetails(noteId) {
        if (!noteId) return;
        try {
            const headers = authToken ? { 'Authorization': `Bearer ${authToken}` } : {};
            const res = await fetch(`${API_BASE}/api/notes/${noteId}`, { headers });
            const result = await res.json();

            if (result.success) {
                const note = result.data;
                document.getElementById('modalNoteTitle').innerText = note.title;
                document.getElementById('modalNoteAuthor').innerText = note.author_name;
                document.getElementById('modalNoteContent').innerText = note.description || '这篇游记没有详细内容哦。';

                const likeBtn = document.getElementById('modalNoteLikeBtn');
                document.getElementById('modalNoteLikeCount').innerText = note.like_count;
                likeBtn.classList.toggle('liked', note.user_has_liked);
                likeBtn.onclick = () => handleLike(noteId).then(() => showNoteDetails(noteId)); // 点赞后刷新弹窗状态

                const collectBtn = document.getElementById('modalNoteCollectBtn');
                document.getElementById('modalNoteCollectCount').innerText = note.collect_count;
                collectBtn.classList.toggle('collected', note.user_has_collected);
                collectBtn.onclick = () => handleCollect(noteId).then(() => showNoteDetails(noteId)); // 收藏后刷新弹窗状态
                
                document.getElementById('noteDetailModal').style.display = 'flex';
            } else {
                alert('获取游记详情失败: ' + result.message);
            }
        } catch (error) {
            console.error('获取游记详情错误:', error);
            alert('获取游记详情时发生网络错误');
        }
    }

    // 在 window.onclick 事件中增加对新弹窗的处理
    window.onclick = event => { 
        if (event.target == document.getElementById('spotDetailModal')) {
            closeSpotModal();
        }
        // 【新增加】点击弹窗外部区域时，关闭游记弹窗
        if (event.target == document.getElementById('noteDetailModal')) {
            closeNoteModal();
        }
    };

    async function handleSpotLike(spotId) {
        if (!authToken) {
            alert('请先登录！');
            closeSpotModal();
            document.getElementById('loginModal').style.display = 'flex';
            return;
        }
        const res = await fetch(`${API_BASE}/api/spots/${spotId}/like`, { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}` } });
        const result = await res.json();
        if (result.success) {
            document.getElementById('modalLikeCount').innerText = result.like_count;
            document.getElementById('modalLikeBtn').classList.toggle('liked', result.liked);
            document.querySelectorAll(`.spot-like-count-${spotId}`).forEach(el => {
                el.innerText = result.like_count;
            });
        } else { alert(result.message); }
    }

    async function handleSpotCollect(spotId) {
         if (!authToken) {
            alert('请先登录！');
            closeSpotModal();
            document.getElementById('loginModal').style.display = 'flex';
            return;
        }
        const res = await fetch(`${API_BASE}/api/spots/${spotId}/collect`, { method: 'POST', headers: { 'Authorization': `Bearer ${authToken}` } });
        const result = await res.json();
        if (result.success) {
            document.getElementById('modalCollectCount').innerText = result.collect_count;
            document.getElementById('modalCollectBtn').classList.toggle('collected', result.collected);
            if (document.getElementById("profile-page").style.display === "block") {
                displayUserStats();
                showMyCollections();
            }
        } else { alert(result.message); }
    }

    // 【已修改】此函数现在调用 /api/recommend 获取景点数据
    async function fetchAttractions() {
        try {
            // 注意：API调用地址已从 /api/rank 改为 /api/recommend
            const res = await fetch(`${API_BASE}/api/recommend`);
            const result = await res.json();
            const grid = document.getElementById('attractionsGrid');
            grid.innerHTML = '';
            if (result.success) {
                // 使用 result.data，因为 /api/recommend 直接返回 data 数组
                result.data.forEach(spot => {
                    const card = document.createElement('div');
                    card.className = 'attraction-card';
                    card.onclick = () => showSpotDetails(spot.id);
                    card.innerHTML = `
                        <div class="card-content">
                            <h3 class="card-title">${spot.full_name}</h3>
                            <p class="card-desc">${(spot.description || spot.info || '暂无描述').substring(0, 50)}...</p>
                            <div class="card-footer">
                                <div class="author"><div class="avatar"></div><span class="author-name">官方推荐</span></div>
                                <div class="likes">
                                    <i class="fas fa-heart"></i> <span class="spot-like-count-${spot.id}">${spot.likes}</span>
                                </div>
                            </div>
                        </div>`;
                    grid.appendChild(card);
                });
            }
        } catch (error) { console.error("获取首页景点失败:", error); }
    }

    window.addEventListener("DOMContentLoaded", () => {
        updateUIBasedOnAuthStatus();
        fetchAttractions();
        fetchRankings();
        if (authToken) { fetchRecommendations(); } 
        else { document.getElementById("recommendationList").innerHTML = "<p style='text-align:center; color: #6c757d;'>登录后可查看专属推荐</p>"; }

        document.getElementById("searchBtn").addEventListener("click", performSearch);
        document.getElementById("searchInput").addEventListener("keypress", e => e.key === "Enter" && performSearch());
        document.getElementById("switchToLogin").addEventListener("click", e => { e.preventDefault(); document.getElementById("registerModal").style.display = "none"; document.getElementById("loginModal").style.display = "flex"; });
        document.getElementById("switchToRegister").addEventListener("click", e => { e.preventDefault(); document.getElementById("loginModal").style.display = "none"; document.getElementById("registerModal").style.display = "flex"; });
        document.querySelectorAll(".close-btn").forEach(btn => btn.addEventListener("click", () => btn.closest(".modal").style.display = "none"));
        
        document.querySelectorAll('.option-card').forEach(card => {
            card.addEventListener('click', function() {
                const parent = this.closest('.options-grid');
                if (!parent.closest('#pref-interests')) {
                    parent.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));
                }
                this.classList.toggle('selected');
            });
        });

        document.addEventListener('click', e => { if (e.target && e.target.id === 'logoutBtn') logoutUser(); });
        window.onclick = event => { if (event.target == document.getElementById('spotDetailModal')) closeSpotModal(); };
    });

    function updateUIBasedOnAuthStatus() {
        if (authToken && currentUser) {
            document.querySelector(".user-actions").innerHTML = `<div class="user-info"><div class="avatar"></div><span style="margin-right:15px;">${currentUser}</span><button class="btn-logout" id="logoutBtn">退出</button></div>`;
        } else {
            document.querySelector(".user-actions").innerHTML = `<button class="btn btn-login" id="loginBtn">登录</button><button class="btn btn-register" id="registerBtn">注册</button>`;
            document.getElementById("loginBtn").addEventListener("click", () => document.getElementById("loginModal").style.display = "flex");
            document.getElementById("registerBtn").addEventListener("click", () => document.getElementById("registerModal").style.display = "flex");
        }
    }

    document.getElementById("registerForm").addEventListener("submit", async (e) => {
        e.preventDefault();
        const username = document.getElementById("username").value, email = document.getElementById("email").value, password = document.getElementById("password").value, confirmPassword = document.getElementById("confirmPassword").value;
        if (password !== confirmPassword) { alert("两次输入的密码不一致！"); return; }
        try {
            const res = await fetch(`${API_BASE}/api/register`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password, email }) });
            const data = await res.json();
            if (data.success) {
                authToken = data.token;
                currentUser = data.name || username;
                localStorage.setItem("authToken", authToken);
                localStorage.setItem("currentUser", currentUser);
                alert("注册成功！接下来请设置您的旅行偏好。");
                document.getElementById("registerModal").style.display = "none";
                updateUIBasedOnAuthStatus();
                showPreferencePage();
                fetchRecommendations();
            } else { alert("注册失败: " + data.message); }
        } catch (error) { console.error("注册错误:", error); alert("注册过程中发生错误"); }
    });

    document.getElementById("loginForm").addEventListener("submit", async (e) => {
        e.preventDefault();
        const username = document.getElementById("loginUsername").value, password = document.getElementById("loginPassword").value;
        try {
            const res = await fetch(`${API_BASE}/api/login`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }) });
            const data = await res.json();
            if (data.success) {
                authToken = data.token;
                currentUser = data.name || username;
                localStorage.setItem("authToken", authToken);
                localStorage.setItem("currentUser", currentUser);
                alert("登录成功！");
                document.getElementById("loginModal").style.display = "none";
                updateUIBasedOnAuthStatus();
                if (data.has_preferences) {
                    showHomePage();
                } else {
                    showPreferencePage();
                }
                fetchRecommendations();
            } else { alert("登录失败: " + data.message); }
        } catch (error) { console.error("登录错误:", error); alert("登录过程中发生错误"); }
    });
    document.addEventListener('DOMContentLoaded', function() {
        // 获取localStorage中的用户名
        const currentUser = localStorage.getItem('currentUser');
        
        // 仅当用户已登录（currentUser存在）时发送请求
        if (currentUser) {
            // 发送到Python后端
            fetch('/api/get_username', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username: currentUser })
            })
            .then(response => response.json())
            .then(data => {
                console.log('用户名已发送到后端:', data);
            })
            .catch(error => {
                console.error('发送用户名失败:', error);
            });
        }
    });
    function logoutUser() {
        localStorage.removeItem('authToken');
        localStorage.removeItem('currentUser');
        authToken = null;
        currentUser = null;
        alert('已退出登录');
        location.reload();
    }

    function showPreferencePage() {
        document.getElementById("preferencePage").style.display = "block";
        document.querySelector(".container").style.display = "none";
    }

    function hidePreferencePage() {
        document.getElementById("preferencePage").style.display = "none";
        document.querySelector(".container").style.display = "block";
    }

    document.getElementById("savePreferences").addEventListener("click", function() {
        const preferences = {
            season: document.querySelector('#pref-season .option-card.selected')?.dataset.value,
            duration: document.querySelector('#pref-duration .option-card.selected')?.dataset.value,
            company: document.querySelector('#pref-company .option-card.selected')?.dataset.value,
            budget: document.querySelector('#pref-budget .option-card.selected')?.dataset.value,
            interests: Array.from(document.querySelectorAll('#pref-interests input[name="interest"]:checked')).map(i => i.value),
            transport: document.querySelector('#pref-transport .option-card.selected')?.dataset.value
        };
        if (authToken) {
            fetch(`${API_BASE}/api/preferences`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` }, body: JSON.stringify(preferences) })
            .then(res => res.json()).then(data => {
                if (data.success) { 
                    alert('偏好设置已保存'); 
                    hidePreferencePage(); 
                    showHomePage();
                } 
                else { alert('保存失败: ' + data.message); }
            }).catch(error => { console.error('保存偏好错误:', error); alert('保存过程中发生错误'); });
        } else { alert('请先登录'); }
    });

    async function fetchRecommendations() {
        try {
            const currentUser = localStorage.getItem('currentUser');
        
            // 仅当用户已登录（currentUser存在）时发送请求
            if (currentUser) {
                // 发送到Python后端
                fetch('/api/get_username', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username: currentUser })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('用户名已发送到后端:', data);
                })
                .catch(error => {
                    console.error('发送用户名失败:', error);
                });
            }



            const res = await fetch(`${API_BASE}/api/recommend`);
            const data = await res.json();
            const recList = document.getElementById("recommendationList");
            recList.innerHTML = "";
            if (data.success) {
                data.data.forEach(item => {
                    const card = document.createElement("div");
                    card.className = "rec-card";
                    card.onclick = () => showSpotDetails(item.id);
                    card.innerHTML = `<div class="rec-info"><div class="rec-name">${item.full_name}</div><div class="rec-stats"><i class="fas fa-heart"></i> <span class="spot-like-count-${item.id}">${item.likes || 0}</span></div></div>`;
                    recList.appendChild(card);
                });
            } else { recList.innerHTML = `<p style="color:red;text-align:center;">${data.message}</p>`; }
        } catch (error) { console.error("获取推荐错误:", error); document.getElementById("recommendationList").innerHTML = `<p style="color:red;text-align:center;">获取推荐失败</p>`; }
    }

 
    async function fetchRankings() {
        try {
            const res = await fetch(`${API_BASE}/api/rank`);
            const data = await res.json();
            const rankingList = document.getElementById("rankingList");
            rankingList.innerHTML = "";
            if (data.success) {
                document.querySelector('#rankingList').previousElementSibling.querySelector('.section-title').innerHTML = '<i class="fas fa-book-reader"></i> 热门游记排名';
                data.data.forEach((item, idx) => {
                    const div = document.createElement("div");
                    div.className = "ranking-item";
                    
 
                    div.style.cursor = "pointer";
                
                    div.onclick = () => showNoteDetails(item.id);

                    const score_percent = (item.TruthScore * 100).toFixed(1);

                    // HTML 结构已简化，移除了 author_name
                    div.innerHTML = `
                        <div class="rank-number ${idx < 3 ? 'top3' : 'top10'}">${idx + 1}</div>
                        <div class="rank-info">
                            <div class="rank-name">${item.title}</div>
                            <div class="rank-stats" style="font-size: 12px;">
                                <i class="fas fa-check-circle" style="color: #28a745;"></i> 
                                <span>可信度: <strong>${score_percent}%</strong></span>
                            </div>
                        </div>`;
                    rankingList.appendChild(div);
                });
            } else { rankingList.innerHTML = `<p style="color:red;text-align:center;">${data.message}</p>`; }
        } catch (error) { console.error("获取排名错误:", error); document.getElementById("rankingList").innerHTML = `<p style="color:red;text-align:center;">获取排名失败</p>`; }
    }

    async function performSearch() {
        const keyword = document.getElementById("searchInput").value.trim();
        if (!keyword) { alert("请输入搜索关键词"); return; }
        try {
            const res = await fetch(`${API_BASE}/api/search?q=${encodeURIComponent(keyword)}`, { headers: authToken ? { "Authorization": "Bearer " + authToken } : {} });
            const data = await res.json();
            if (data.success) {
                document.getElementById('main-content').style.display = 'none';
                document.getElementById('profile-page').style.display = 'none';
                document.getElementById('search-results').style.display = 'block';
                displayResults(data.data);
            } else { alert("搜索失败: " + data.message); }
        } catch (error) { console.error("搜索错误:", error); alert("搜索过程中发生错误"); }
    }

    function displayResults(data) {
        const resultsContainer = document.getElementById('search-results-content');
        resultsContainer.innerHTML = '';
        if (data.spots && data.spots.length > 0) {
            let spotsHtml = '<h3><i class="fas fa-map-marked-alt"></i> 相关景点</h3>';
            data.spots.forEach(spot => {
                spotsHtml += `<div class="attraction-card" onclick="showSpotDetails(${spot.id})"><div class="card-content"><h3 class="card-title">${spot.full_name}</h3><p class="card-desc">${spot.description || '暂无描述'}</p><div class="card-footer"><div class="likes"><i class="fas fa-heart"></i> <span class="spot-like-count-${spot.id}">${spot.likes || 0}</span></div></div></div></div>`;
            });
            resultsContainer.innerHTML += spotsHtml;
        }
        if (data.notes && data.notes.length > 0) {
            let notesHtml = '<h3 style="margin-top:20px;"><i class="fas fa-book-open"></i> 相关游记</h3>';
            data.notes.forEach(note => {
                notesHtml += `<div class="note-card" id="note-card-${note.id}"><h4 class="note-title">${note.title}</h4><p class="note-content">${note.content || ''}</p><p><small>作者: ${note.author_name}</small></p><div class="note-actions"><button class="note-action-btn like-btn ${note.user_has_liked ? 'liked' : ''}" onclick="handleLike(${note.id})">👍 赞 (<span id="like-count-${note.id}">${note.like_count}</span>)</button><button class="note-action-btn collect-btn ${note.user_has_collected ? 'collected' : ''}" onclick="handleCollect(${note.id})">⭐ 收藏 (<span id="collect-count-${note.id}">${note.collect_count}</span>)</button></div></div>`;
            });
            resultsContainer.innerHTML += notesHtml;
        }
        if (resultsContainer.innerHTML === '') { resultsContainer.innerHTML = '<p>未找到相关结果。</p>'; }
    }

    async function displayUserStats() {
        if (!authToken) return;
        try {
            const response = await fetch(`${API_BASE}/api/user/stats`, { headers: { 'Authorization': `Bearer ${authToken}` } });
            const result = await response.json();
            if (result.success) {
                const stats = result.data;
                document.getElementById('profile-name').innerText = stats.name;
                document.getElementById('profile-notes-posted').innerText = `我发布的游记: ${stats.total_notes_posted}`;
                document.getElementById('profile-likes-received').innerText = `收到的赞: ${stats.total_likes_received}`;
                document.getElementById('profile-collections-made').innerText = `我的收藏数: ${stats.total_collections_made}`;
            } else { console.error('获取用户数据失败:', result.message); }
        } catch (error) { console.error('获取用户数据异常:', error); }
    }

    async function showMyCollections() {
        if (!authToken) return;
        const container = document.getElementById('my-collections-container');
        container.innerHTML = '<p>正在加载收藏内容...</p>';
        try {
            const response = await fetch(`${API_BASE}/api/user/collections`, { headers: { 'Authorization': `Bearer ${authToken}` } });
            const result = await response.json();
            if (result.success) {
                if (result.data && result.data.length > 0) {
                    let htmlContent = '<div class="attractions-grid">';
                    result.data.forEach(spot => {
                        htmlContent += `
                            <div class="attraction-card" onclick="showSpotDetails(${spot.id})">
                                <div class="card-content">
                                    <h3 class="card-title">${spot.full_name}</h3>
                                    <p class="card-desc">${(spot.description || spot.info || '暂无描述').substring(0, 80)}...</p>
                                    <div class="card-footer">
                                        <div class="likes">
                                            <i class="fas fa-heart"></i> <span class="spot-like-count-${spot.id}">${spot.likes}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    htmlContent += '</div>';
                    container.innerHTML = htmlContent;
                } else { container.innerHTML = '<p>你还没有收藏任何景点哦。</p>'; }
            } else { container.innerHTML = `<p>加载失败: ${result.message}</p>`; }
        } catch(error) { console.error('加载收藏失败', error); container.innerHTML = `<p>加载收藏时发生错误。</p>`; }
    }

    function showProfilePage() {
        if (!authToken) { alert('请先登录'); document.getElementById("loginModal").style.display = "flex"; return; }
        document.getElementById("main-content").style.display = "none";
        document.getElementById("search-results").style.display = "none";
        document.getElementById("preferencePage").style.display = "none";
        document.getElementById("profile-page").style.display = "block";
        displayUserStats();
        showMyCollections();
    }

    function showHomePage() {
        document.getElementById("profile-page").style.display = "none";
        document.getElementById("preferencePage").style.display = "none";
        document.getElementById("search-results").style.display = "none";
        document.getElementById("main-content").style.display = "block";
        document.querySelector(".container").style.display = "block";
    }
</script>
</body>
</html>